<template>
  <el-form
    :model="activeForm"
    :rules="activeRules"
    ref="activeForm"
    size="small"
    label-width="160px"
  >
    <div class="haruyuki-form-title">{{ basicTitleData.basicTitle }}</div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="活动名称:" prop="activeName">
          <el-input
            size="small"
            v-model="activeForm.activeName"
            placeholder="请输入活动名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="活动日期:" prop="time">
          <el-date-picker
            class="active-width-100"
            v-model="activeForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="activeTime"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="配置通道:" prop="aisleCodeList">
          <el-transfer
            class="haruyuki-width-100 haruyuki-flex-center"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入通道名称"
            :button-texts="['取消分配', '分配通道']"
            :titles="['未分配通道', '已分配通道']"
            v-model="activeForm.aisleCodeList"
            :data="aisleData"
          >
          </el-transfer>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="haruyuki-form-title">{{ basicTitleData.merchantTitle }}</div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="商户类型配置" prop="rpiTypeList">
          <el-checkbox-group v-model="activeForm.rpiTypeList">
            <el-checkbox
              :label="item.dictKey"
              :name="item.dictKey"
              v-for="(item, index) in rpiTypeLists"
              :key="index"
              >{{ item.dictValue }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="支付方式配置" prop="payTypeList">
          <el-checkbox-group v-model="activeForm.payTypeList">
            <el-checkbox
              :label="item.dictKey"
              :name="item.dictKey"
              v-for="(item, index) in payTypeLists"
              :key="index"
              >{{ item.dictValue }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="设备类型配置" prop="equipmentTypeList">
          <el-checkbox-group v-model="activeForm.equipmentTypeList">
            <el-checkbox
              :label="item.rptNo"
              :name="item.rptNo"
              v-for="(item, index) in equipmentTypeLists"
              :key="index"
              >{{ item.rptName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="商户开户有效期配置:" prop="period">
          <div class="active-box-form">
            <span class="haruyuki-mr-20">开户日期至开户后第</span>
            <el-input
              size="small"
              v-model="activeForm.period"
              placeholder="请输入商户开户有效期配置"
            ></el-input>
            <span class="haruyuki-ml-20">日内为商户有效期</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="单商户参与活动设备数量:" prop="activeCount">
          <div class="active-box-form">
            <el-input
              size="small"
              v-model="activeForm.activeCount"
              placeholder="请输入单商户参与活动设备数量"
            ></el-input>
            <span class="haruyuki-ml-20">台</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="ID去重配置:" prop="examineType">
          <el-switch
            v-model="activeForm.examineType"
            :active-value="2"
            :inactive-value="1"
            active-text="月去重"
            inactive-text="日去重"
          >
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="单笔交易有效金额限制:" prop="validAmount">
          <div class="active-box-form">
            <span class="haruyuki-mr-20">单笔交易金额大于等于</span>
            <el-input
              size="small"
              v-model="activeForm.validAmount"
              placeholder="请输入单商户参与活动设备数量"
            ></el-input>
            <span class="haruyuki-ml-20">元</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="单ID日有效计数笔数:" prop="validCount">
          <div class="active-box-form">
            <el-input
              size="small"
              v-model="activeForm.validCount"
              placeholder="请输入单商户参与活动设备数量"
            ></el-input>
            <span class="haruyuki-ml-20">笔</span>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="流量卡返现金额:" prop="renewAmount">
          <div class="active-box-form">
            <el-input
              size="small"
              v-model="activeForm.renewAmount"
              placeholder="请输入流量卡返现金额"
            ></el-input>
            <span class="haruyuki-ml-20">元</span>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label="是否有奖金:" prop="isBonus">
        <el-switch
          v-model="activeForm.isBonus"
          :active-value="1"
          :inactive-value="0"
          active-text="是"
          inactive-text="否"
          @change="switchIsBonus"
        >
        </el-switch>
      </el-form-item>
      <el-col :span="12" v-if="activeForm.isBonus===1">
        <el-form-item label="奖金:" prop="bonusAmount">
          <div class="active-box-form">
            <el-input
              size="small"
              v-model="activeForm.bonusAmount"
              placeholder="请输入奖金金额"
            ></el-input>
            <span class="haruyuki-ml-20">元</span>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label="是否有奖励券码:" prop="isCoupon">
        <el-switch
          v-model="activeForm.isCoupon"
          :active-value="1"
          :inactive-value="0"
          active-text="是"
          inactive-text="否"
          @change="switchIsCoupon"
        >
        </el-switch>
      </el-form-item>
      <el-col :span="24" v-if="activeForm.isCoupon===1">
        <el-form-item label="兑换券类型:" prop="couponType">
          <el-radio-group v-model="activeForm.couponType">
            <el-radio :label="item.dictKey" name="couponType" v-for="(item,indexs) in couponTypeArr" :key="indexs">{{item.dictValue}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="haruyuki-form-title">{{ basicTitleData.awardTitle }}</div>
    <div class="haruyuki-flex-x-end">
      <el-button type="text" size="mini" @click.stop="() => ladderAppend()">
        添加奖励
      </el-button>
      <el-button
        type="text"
        size="mini"
        v-if="activeForm.limitFormList && activeForm.limitFormList.length > 1"
        @click.stop="() => ladderRemove()"
      >
        删除奖励
      </el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item
          v-for="(item, idx) in activeForm.limitFormList"
          :key="idx"
          :label="'阶段' + (idx + 1) + `${idx == 0 ? '（激活）' : '（达标）'}`"
          :prop="'limitFormList[' + idx + ']'"
          :rules="{ required: true, message: '请选择', trigger: 'blur' }"
        >
          <el-form-item label="奖励金额:">
            <div class="active-box-form">
              <el-input
                size="small"
                v-model="activeForm.limitFormList[idx].rewardAmount"
              ></el-input>
              <span class="haruyuki-ml-20">元</span>
            </div>
          </el-form-item>
          <el-form-item label="有效交易总金额＞:">
            <div class="active-box-form">
              <el-input
                size="small"
                v-model="activeForm.limitFormList[idx].validAmount"
              ></el-input>
              <span class="haruyuki-ml-20">元</span>
            </div>
          </el-form-item>
          <el-form-item label="有效交易总笔数≥:">
            <div class="active-box-form">
              <el-input
                size="small"
                v-model="activeForm.limitFormList[idx].validCount"
              ></el-input>
              <span class="haruyuki-ml-20">笔</span>
            </div>
          </el-form-item>
          <el-form-item label="生效期限:" v-if="idx == 0">
            <div class="active-box-form">
              <span class="">绑定日期(含)至</span>
              <span class="haruyuki-mr-20">绑定后(含)</span>
              <el-input
                size="small"
                v-model="activeForm.limitFormList[idx].endPeriod"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                onpaste="value=value.replace(/[^0-9]/g,'')"
                oncontextmenu="value=value.replace(/[^0-9]/g,'')"
                @change="endPeriodChange($event, idx)"
              ></el-input>
              <span class="haruyuki-ml-20">日</span>
            </div>
          </el-form-item>
          <el-form-item label="生效期限:" v-if="idx != 0">
            <div class="active-box-form">
              <span class="haruyuki-mr-20">绑定日期(含)至</span>
              <el-input
                size="small"
                v-model="activeForm.limitFormList[idx].beginPeriod"
                :disabled="true"
              ></el-input>
              <span class="haruyuki-ml-20 haruyuki-mr-20">绑定后(含)</span>
              <el-input
                size="small"
                v-model="activeForm.limitFormList[idx].endPeriod"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                onpaste="value=value.replace(/[^0-9]/g,'')"
                oncontextmenu="value=value.replace(/[^0-9]/g,'')"
                @change="endPeriodChange($event, idx)"
              ></el-input>
              <span class="haruyuki-ml-20">日</span>
            </div>
          </el-form-item>
        </el-form-item>
      </el-col>
    </el-row>

    <div class="haruyuki-form-title">{{ basicTitleData.examineTitle }}</div>
    <div class="haruyuki-flex-x-end">
      <el-button
        type="text"
        size="mini"
        v-if="
          JSON.stringify(this.activeForm.debtFake) === '{}' &&
          JSON.stringify(this.activeForm.debtNone) === '{}'
        "
        @click.stop="() => activateAppend()"
      >
        添加考核
      </el-button>
      <el-button
        type="text"
        size="mini"
        v-if="
          JSON.stringify(this.activeForm.debtFake) !== '{}' &&
          JSON.stringify(this.activeForm.debtNone) !== '{}'
        "
        @click.stop="() => activateRemove()"
      >
        删除考核
      </el-button>
    </div>
    <el-row
      :gutter="20"
      v-if="JSON.stringify(this.activeForm.debtFake) !== '{}'"
    >
      <el-col :span="24">
        <el-form-item label="考核一（伪激活）" prop="debtFake">
          <el-form-item label="扣款金额:">
            <div class="active-box-form">
              <el-input
                size="small"
                v-model="activeForm.debtFake.debtAmount"
              ></el-input>
              <span class="haruyuki-ml-20">元</span>
            </div>
          </el-form-item>
          <el-form-item label="考核交易金额是≤:">
            <div class="active-box-form">
              <el-input
                size="small"
                v-model="activeForm.debtFake.examineAmount"
              ></el-input>
              <span class="haruyuki-ml-20">元</span>
            </div>
          </el-form-item>
          <el-form-item label="生效期限:">
            <div class="active-box-form">
              <span class="haruyuki-mr-20">绑定日期至绑定后</span>
              <el-input
                size="small"
                v-model="activeForm.debtFake.period"
              ></el-input>
              <span class="haruyuki-ml-20">日，且活动状态为已激活</span>
            </div>
          </el-form-item>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      v-if="JSON.stringify(this.activeForm.debtNone) !== '{}'"
    >
      <el-col :span="24">
        <el-form-item label="考核二（未激活）" prop="debtNone">
          <el-form-item label="扣款金额:">
            <div class="active-box-form">
              <el-input
                size="small"
                v-model="activeForm.debtNone.debtAmount"
              ></el-input>
              <span class="haruyuki-ml-20">元</span>
            </div>
          </el-form-item>
          <el-form-item label="生效期限:">
            <div class="active-box-form">
              <span class="haruyuki-mr-20">设备入库日期向后顺延</span>
              <el-input
                size="small"
                v-model="activeForm.debtNone.period"
              ></el-input>
              <span class="haruyuki-ml-20"
                >天，设备活动状态为未绑定、已绑定未交易、已绑定超激活期</span
              >
            </div>
          </el-form-item>
        </el-form-item>
      </el-col>
    </el-row>

    <div class="haruyuki-form-title">{{ basicTitleData.remarkTitle }}</div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input
            size="small"
            type="textarea"
            v-model="activeForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-image-viewer
      style="z-index: 99999"
      v-if="imgShow"
      :on-close="
        () => {
          imgShow = false
        }
      "
      :url-list="imgUrlList"
    ></el-image-viewer>
  </el-form>
</template>

<script>
import { getDetail } from '@/api/rb-oem/active/active'
import { getAisleOemList } from '@/api/rb-oem/serviceinfo/service_info'
// import { uploadPublic } from "@/api/system/oss";
import { getDictionary } from '@/api/system/dict'
import canvasImg from '@/util/canvasImg'
import { selectTypeList } from '@/api/rb-oem/active/active'

export default {
  mixins: [canvasImg],
  props: {
    activeForm: Object
  },
  data() {
    return {
      isYesNo: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      imgShow: false,
      imgUrlList: [],
      basicTitleData: {
        basicTitle: '基础信息',
        merchantTitle: '商户考核',
        awardTitle: '奖励配置',
        examineTitle: '考核配置',
        remarkTitle: '备注信息'
      },
      activeRules: {
        activeName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        time: [{ required: true, message: '请选择活动日期', trigger: 'blur' }],
        // remark: [
        //   { required: true, message: "请输入备注", trigger: "blur" },
        // ],
        // aisleCodeList: [
        //   { required: true, message: "请配置通道", trigger: "blur" },
        // ],
        rpiTypeList: [
          { required: true, message: '请选择商户类型', trigger: 'blur' }
        ],
        payTypeList: [
          { required: true, message: '请选择支付方式', trigger: 'blur' }
        ],
        equipmentTypeList: [
          { required: true, message: '请选择设备类型', trigger: 'blur' }
        ],
        period: [
          { required: true, message: '请输入商户开户有效期', trigger: 'blur' }
        ],
        activeCount: [
          {
            required: true,
            message: '请输入单商户参与活动设备数量',
            trigger: 'blur'
          }
        ],
        validAmount: [
          {
            required: true,
            message: '请输入单笔交易有效金额限制',
            trigger: 'blur'
          }
        ],
        validCount: [
          {
            required: true,
            message: '请输入单ID日有效计数笔数',
            trigger: 'blur'
          }
        ],
        renewAmount: [
          { required: true, message: '请输入流量卡返现金额', trigger: 'blur' }
        ],
        isBonus: [
          { required: true, message: '请选择是否有奖金', trigger: 'blur' }
        ],
        bonusAmount: [
          { required: true, message: '请输入奖金金额', trigger: 'blur' }
        ],
        isCoupon: [
          { required: true, message: '请选择是否有奖励劵码', trigger: 'blur' }
        ],
        couponType: [
          { required: true, message: '请选择兑换券类型', trigger: 'blur' }
        ]
      },
      isShow: true,
      aisleCodeList: [],
      aisleData: [],
      payTypeLists: [],
      rpiTypeLists: [],
      equipmentTypeLists: [],
      couponTypeArr:[]
    }
  },
  computed: {},
  created() {
    this.doGetDicts()
  },
  methods: {
    switchIsBonus(val){
      if(val === 0){
        this.activeForm.bonusAmount =''
      }
    },
    switchIsCoupon(val){
      if(val === 0){
        this.activeForm.couponType =''
      }
    },
    /* 获取详情 */
    getActiveDetails(code) {
      getDetail(code).then(
        (res) => {
          this.activeForm = res.data.data.data;
          this.activeForm.couponType = this.activeForm.couponType+'';
          this.$set(this.activeForm, 'time', [
            this.activeForm.beginTime,
            this.activeForm.endTime
          ])
        },
        (error) => {
          window.console.log(error)
        }
      )
    },
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url
      this.imgShow = true
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: 'rpt_pay_type' }).then((res) => {
        this.payTypeLists = res.data.data
      })
      getDictionary({ code: 'user_income_type' }).then((res) => {
        this.rpiTypeLists = res.data.data
      })
      getDictionary({ code: 'coupon_type' }).then((res) => {
        this.couponTypeArr = res.data.data
        console.log('11111',this.couponTypeArr)
      })
      selectTypeList(-1, -1).then((res) => {
        this.equipmentTypeLists = res.data.data
      })
      getAisleOemList('-1', '-1').then((res) => {
        let aisleData = res.data.data.records
        aisleData.forEach((item, index) => {
          this.aisleData.push({
            label: item.aisleName,
            key: item.aisleCode,
            pinyin: item.aisleName[index]
          })
        })
      })
    },
    /* 绑定后日期 change */
    endPeriodChange(e, index) {
      if (!e) {
        e = 1
        this.activeForm.limitFormList[index].endPeriod = e
      }
      if (this.activeForm.limitFormList.length > index + 1) {
        this.activeForm.limitFormList[index + 1].beginPeriod = parseFloat(e) + 1
      }
    },
    /* 阶段奖励 添加 */
    ladderAppend() {
      let upIdx = this.activeForm.limitFormList.length - 1
      let params = {
        activeGrade: 0,
        beginPeriod: 0,
        endPeriod: 0,
        validAmount: 0,
        validCount: 0
      }
      if (this.activeForm.limitFormList[upIdx].endPeriod != 0) {
        params.beginPeriod =
          parseFloat(this.activeForm.limitFormList[upIdx].endPeriod) + 1
      }
      this.activeForm.limitFormList.push(params)
    },
    /* 阶段奖励 删除 */
    ladderRemove() {
      let length = this.activeForm.limitFormList.length - 1
      this.activeForm.limitFormList.splice(length, 1)
    },
    /* 未伪激活 添加 */
    activateAppend() {
      if (
        JSON.stringify(this.activeForm.debtFake) === '{}' &&
        JSON.stringify(this.activeForm.debtNone) === '{}'
      ) {
        ;(this.activeForm.debtFake = {
          debtAmount: 0,
          examineAmount: 0,
          period: 0
        }),
          (this.activeForm.debtNone = {
            debtAmount: 0,
            period: 0
          })
      }
    },
    /* 未伪激活 删除 */
    activateRemove() {
      ;(this.activeForm.debtFake = {}), (this.activeForm.debtNone = {})
    },
    /* 活动日期 选择 */
    activeTime(e) {
      this.activeForm.beginTime = e[0]
      this.activeForm.endTime = e[1]
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-transfer-panel__list.is-filterable {
  width: 100% !important;
  height: 500px !important;
}

/deep/.el-transfer-panel {
  width: 100% !important;
  height: 500px !important;
}

.active-width-100 {
  width: 100% !important;
}

.active-box-form {
  display: flex;
  white-space: nowrap;
  width: 60%;
}
::v-deep .el-select {
  width: 100%;
}
</style>